<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点关系查找</title>
</head>
<body>
    <ul>
        <li>
            <h1></h1>
            <span></span>
        </li>
    </ul>
</body>
<script>
    const ul = document.querySelector('ul');
    const h1 = ul.childNodes[1].childNodes[1];
    const span  = h1.nextSibling.nextSibling;

    // 查找子节点
    console.log(ul.childNodes);

    // 查找第一个子节点
    console.log(ul.firstChild);

    // 查找最后一个子节点
    console.log(ul.lastChild);

    // 查找父节点
    console.log(ul.parentNode);

    // 查找下一个兄弟节点
    console.log(h1.nextSibling.nextSibling);

    // 查找上一个兄弟节点
    console.log(span.previousSibling.previousSibling);

    console.log(document.documentElement.parentNode == document);
</script>
</html>